import { Avatar as AvatarAntd, Dropdown } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { useNavigate } from 'react-router-dom';
import { clearLocalStorage } from '@/utils/utils';
import useUserInfoStore from '@/store/userInfoStore';

/**
 * 头像组件 用于用户登录后显示头像和个人信息
 * @returns
 */
const Avatar = () => {
  const navigate = useNavigate();
  const { setUserInfo, setToken } = useUserInfoStore();

  const items: MenuProps['items'] = [
    {
      key: 'profile',
      label: '个人信息',
      className: 'hover:bg-emerald-50 transition-colors duration-300',
      onClick: () => navigate('/profile'),
    },
    {
      key: 'switchRole',
      label: '切换角色',
      className: 'hover:bg-emerald-50 transition-colors duration-300',
      onClick: () => {
        localStorage.removeItem('token');
        localStorage.removeItem('userInfo');
        setUserInfo({} as any);
        setToken('');
        navigate('/admin/login');
      },
    },
    {
      key: 'cart',
      label: '购物车',
      className: 'hover:bg-emerald-50 transition-colors duration-300',
      onClick: () => {
        navigate('/cart');
      },
    },
    {
      type: 'divider',
    },
    {
      key: 'logout',
      label: '退出登录',
      className: 'hover:bg-emerald-50 text-red-500 transition-colors duration-300',
      onClick: () => {
        clearLocalStorage();
        setUserInfo({} as any);
        setToken('');
        navigate('/login');
      },
    },
  ];

  return (
    <div className="cursor-pointer">
      <Dropdown
        menu={{
          items,
          className: 'mt-4',
          style: {
            backgroundColor: 'white',
            padding: '4px',
            borderRadius: '8px',
            boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
          },
        }}
        placement="bottomRight"
      >
        <AvatarAntd
          size="large"
          className="border-2 border-white hover:border-emerald-200 transition-all duration-300"
          style={{
            backgroundColor: '#10b981',
            cursor: 'pointer',
          }}
          icon={<UserOutlined className="text-white" />}
        />
      </Dropdown>
    </div>
  );
};

export default Avatar;
